<template>
  <div>
    <div class="center-pane" id="class-pane">
      <el-row>
        <el-col :span="14" class="goal-pane">
          <div class="title-bar">
            <span class="title">
              <ri i="plan"></ri>
              学习进度
            </span>
            <span class="right">
              <el-button type="warning" size="mini" @click="addGoal">
                <ri i="flag"></ri>
                立个小目标
              </el-button>
              <el-button type="success" size="mini" @click="goLearn">
                <ri i="start"></ri>
                学习
              </el-button>
              <el-button type="primary" size="mini" @click="goReview">
                <ri i="hot"></ri>
                温习
              </el-button>
            </span>
          </div>
          <div class="goal-stats-pane">
            <goal-card
              v-for="n in items"
              :key="n.id"
              :i="n"
            ></goal-card>
          </div>
        </el-col>
        <el-col :span="10">
          <character-pane></character-pane>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import GoalCard from "../class/GoalCard.vue";
import CharacterPane from "../class/CharacterPane.vue";
export default {
  components: {
    GoalCard,
    CharacterPane
  },
  data() {
    return {
      items: [
        {
          id: "a",
          name: "先赚它一个亿",
          intro: "全站累积创造1亿颗星星",
          count: 15,
          unit: "本",
          stars: 442,
          time: "10年",
          progress: 1,
        },
        {
          id: "b",
          name: "诗圣门徒",
          intro: "熟练掌握300首杜甫诗作",
          count: 121,
          unit: "首",
          stars: 342,
          progress: 10,
        },
        {
          id: "c",
          name: "学富五车",
          intro: "在5个领域达到熟练水准",
          count: 45,
          unit: "条",
          stars: 131,
          progress: 13,
        },
        {
          id: "d",
          name: "旁征博引",
          intro: "添加1000个引用注释",
          count: 72,
          stars: 100,
          unit: "篇",
          progress: 25,
        },
      ],
    };
  },
  created() {
    this.$store.dispatch("setActiveMenuIndex", "/classroom");
  },
  methods: {
    addGoal() {
      this.$router.push("/goals/edit");
    },
    goLearn() {
      this.$router.push("/learn");
    },
    goReview() {
      this.$router.push("/review");
    },
  },
};
</script>

<style lang="stylus">
#class-pane
  padding 0
  .goal-pane
    padding 0 1vw
    border-right 1px solid #eee
    .title-bar
      .title
        .icon-button
          font-size 1em
          font-weight normal
          color #666

  .character-pane
    padding 0 1vw
    min-height 500px

</style>